<template>
  <div class="tabbar">
    <div class="wrapper" ref="wrapper">
      <div class="bscroll-container" :style="transform">
        <!-- 刷新提示信息 -->
        <div class="top-tip" ref="Toptip">
          <!-- <span class="refresh-hook">{{pulldownMsg}}</span> -->
          <div class="before-trigger" v-if="beforePullDown">
            <bubble :y="bubbleY"></bubble>
          </div>
          <div class="after-trigger" v-else>
            <div v-if="isPullingDown" class="loading">
              <loading></loading>
            </div>
            <div v-else>
              <span>{{refreshTxt}}</span>
            </div>
          </div>
        </div>
        <!-- 内容列表 -->
        <!-- 用box来撑起内容高度 实现数据不够时  可以滑动  页面初始化时计算出合理的高度-->
        <div ref="content">
          <ul class="content">
            <li v-for="(item,index) in data" :key="index">{{item}}</li>
          </ul>
        </div>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

let bscroll = document.getElementsByClassName("bscroll-container")[0];
let count = 1;
export default {
  data() {
    return {
      data: [0, 1, 2],
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",

      refreshTxt: "刷新成功",

      pullDownInitTop: -50,
      isPullingDown: false,
      beforePullDown: true,
      isPullingUp:false,
      bubbleY: 0,
      transform: "transform: translate(0px, 0px) scale(1) translateZ(0px)"
    };
  },
  mounted() {
    this.$refs.content.style.minHeight = `${this.$refs.wrapper.offsetHeight +
      1}px`;
  },
  methods: {
    //模拟数据请求
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const arr = [];
          for (let i = 0; i < 5; i++) {
            +arr.push(count++);
          }
          resolve(arr);
        }, 1000);
      });
    },
    //下拉刷新
    getpullDown() {
      this.getData().then(res => {
        this.isPullingDown = false;

        setTimeout(() => {
          this.transform =
            "transform: translate(0px, 0px) scale(1) translateZ(0px);    transition-duration: 1000ms;";
          //刷新数据
          this.data = [...this.data];
          //恢复刷新提示文本值
          this.pulldownMsg = "下拉刷新";
          //刷新成功后提示
          // that.refreshalert();
          //刷新列表后，重新计算滚动区域高度
          this.scroll.refresh();
        }, 200);
      });
    },
    //下拉加载
    getpullUp() {
      this.getData().then(res => {
        this.isPullingDown = true;
        //恢复文本值
        this.pullupMsg = "加载更多";
        this.data = this.data.concat(res);
        this.scroll.refresh();
      });
    }
  },
  created() {
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 2, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true, //是否派发click事件
        bounce: {
          top: true
        },
        bounceTime: 2000
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        console.log("滚动过程中", pos.y);
        this.beforePullDown = true;
        this.bubbleY = Math.max(0, pos.y + this.pullDownInitTop - 10);
        if (pos.y > 50) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      // 滚动结束
      this.scroll.on("scrollEnd", pos => {
        console.log("滚动结束", pos.y);
      });

      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        this.beforePullDown = false;
        this.isPullingDown = false; 
        //上拉刷新
        console.log("鼠标/手指离开", pos.y, this.scroll.maxScrollY);
        if (pos.y > 30) {
           console.log("下拉刷新");
          this.transform =
            "transform: translate(0px, 40px) scale(1) translateZ(0px);";
          //模拟数据请求时间
          setTimeout(() => {
            this.getpullDown();
          }, 2000);
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          
          this.pullupMsg = "加载中。。。";
          let lateY = `${ - this.$refs.content.offsetHeight + this.$refs.wrapper.offsetHeight - 35}`;
          console.log("上拉加载中", lateY );
          this.transform =
            "transform: translate(0px, "+ lateY +"px) scale(1) translateZ(0px);  transition-duration: 1000ms;";
          setTimeout(() => {
            this.getpullUp();
          }, 2000);
        }
      });
    });
  }
};
</script>

<style >
.content {
  border-top: 1px solid #777;
}
.tabbar .wrapper {
  width: 100%;
  height: 300px;
  background: #ccc;
  overflow: hidden;
  position: relative;
}

li {
  line-height: 50px;
  border-bottom: 1px solid #f90000;
  text-align: center;
}

/* 下拉、上拉提示信息 */
.top-tip {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  /* height: 50px;
  line-height: 50px; */
  text-align: center;
  color: #555;
}

.bottom-tip {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  background: #f2f2f2;
  position: absolute;
  bottom: -35px;
  left: 0;
}

/* 全局提示信息 */
.alert-hook {
  display: none;
  position: fixed;
  top: 62px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background: rgba(7, 17, 27, 0.5);
}
.after-trigger {
  line-height: 40px;
}
</style>